<template>
<div>
  <el-button type="primary" size="small" v-if="!warehouse.name" @click="warehouseApply">
    申请仓库
  </el-button>
  <el-descriptions class="warehouseHead" :column="2" border v-if="warehouse.name">
    <template slot="extra">
      <el-button type="primary" size="small"  @click="warehouseDelete">
        注销仓库
      </el-button>
    </template>
    <el-descriptions-item v-model="warehouse.name">
      <template slot="label">
        <i class="el-icon-notebook-1"></i>
        仓库名称
      </template>
      {{warehouse.name}}
    </el-descriptions-item>
    <el-descriptions-item v-model="warehouse.position">
      <template slot="label">
        <i class="el-icon-position"></i>
        仓库地点
      </template>
      {{warehouse.position}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label" v-model="warehouse.sdate">
        <i class="el-icon-date"></i>
        启用时间
      </template>
      {{warehouse.sdate}}
    </el-descriptions-item>
    <el-descriptions-item v-model="warehouse.edate">
      <template slot="label">
        <i class="el-icon-date"></i>
        到期时间
      </template>
      {{warehouse.edate}}
    </el-descriptions-item>
    <el-descriptions-item v-model="warehouse.position">
      <template slot="label">
        <i class="el-icon-crop"></i>
        仓库大小
      </template>
      {{warehouse.size}}
    </el-descriptions-item>
    <el-descriptions-item v-model="warehouse.price">
      <template slot="label">
        <i class="el-icon-discount"></i>
        仓库价格
      </template>
      {{warehouse.price}}
    </el-descriptions-item>
  </el-descriptions>
  <el-table
    stripe
    border
    :data="wareData"
    style="width: 100%"
    v-if="warehouse.name"
    ref = 'waregoodsTable'
    @selection-change="handlerSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="序号">
      <template v-slot="scope">
        <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="kind"
      label="商品种类"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="商品名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="storage"
      label="库存情况"
      width="150"
    >
    </el-table-column>
    <el-table-column
      prop="status"
      label="商品状态"
      width="150"
      :filters="[{ text: '已上架', value: '已上架' }, { text: '未上架', value: '未上架' }]"
      :filter-method="filterTag"
    >
      <template v-slot="scope">
        <el-tag
          :type="scope.row.status === '已上架' ? 'primary' : 'success'"
          disable-transitions>
          {{ scope.row.status}}
        </el-tag>
      </template>

    </el-table-column>
    <el-table-column
      prop="options"
      label="操作"
      width="150"
    >
      <template v-slot="scope">
        <el-button
          size="mini"
          @click="upShelf(scope.$index, scope.row)"
          v-if="scope.row.status=='未上架'"
        >
          上架
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="downShelf(scope.$index, scope.row)"
          v-if="scope.row.status=='已上架'"
        >下架</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div v-if="warehouse.name" class="pagination" style="margin-top:20px;text-align:center;">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,prev, sizes, pager, next,jumper"
      :current-page.sync="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      :page-sizes="[10,20,50,100]"
      :total="pageParams.total">
    </el-pagination>
  </div>
  <el-button size="small" style="margin-top: 10px"
             type="primary"
             @click = "upShelfMany"
             v-if="warehouse.name"
             :disabled="this.selectItems.length==0">
    批量上架
  </el-button>
  <el-button size="small" style="margin-top: 10px"
             type="primary"
             @click = "outShelfMany"
             v-if="warehouse.name"
             :disabled="this.selectItems.length==0">
    批量下架
  </el-button>
  <el-dialog title="申请仓库" :visible.sync="dialogFormVisible">
    <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
    <el-form  :rules="rules" ref="wareForm" label-width="80px" :model="wareForm">
      <el-form-item label="仓库名称" prop="name">
        <el-input type="text" v-model="wareForm.name"></el-input>
      </el-form-item>
      <el-form-item label="仓库地点" prop="position">
        <el-select v-model="wareForm.position" placeholder="请选择仓库地点">
          <el-option label="上海" value="上海"></el-option>
          <el-option label="北京" value="北京"></el-option>
          <el-option label="广州" value="广州"></el-option>
          <el-option label="兰州" value="兰州"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓库大小" prop="size">
        <el-select v-model="wareForm.size" placeholder="请选择仓库大小" @change="selectSize($event)">
          <el-option label="10000" value="10000"></el-option>
          <el-option label="1000" value="1000"></el-option>
          <el-option label="100" value="100"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用时间">
        <span>{{wareForm.sdate}}</span>
      </el-form-item>
      <el-form-item label="到期时间" prop="edate">
        <el-date-picker type="date" placeholder="选择日期"
                        v-model="wareForm.edate"
                        :picker-options="pickerOptions"
                        @change="selectEdate($event)"
                        style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仓库价格">
        <span>{{ wareForm.price}}  元</span>
      </el-form-item>
      <el-form-item>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="submit">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "warehouseShow",
  mounted() {
    //this.initWare();
    this.getToday();
  },
  data(){
    return{
      //user: JSON.parse(window.sessionStorage.getItem("user"))
      warehouse:{
        name:'',
        position:'',
        sdate:'',
        edate:'',
        size:0,
        price:0
      },
      wareData: [{
        number:'1',
        kind:'生鲜',
        name:'龙虾',
        storage:'170',
        status:'已上架'
      },{
        number:'2',
        kind:'生鲜',
        name:'龙虾',
        storage:'180',
        status:'未上架'
      },
        {
          number:'3',
          kind:'生鲜',
          name:'龙虾',
          storage:'200',
          status:'已上架'
        }],
      selectItems:[],
      wareForm: {
        name: '',
        position: '',
        sdate: '',
        edate: '',
        size:0,
        price:0
      },
      dialogFormVisible:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      rules:{
        name:[{
          required:true,message:'请输入仓库名称',trigger:'blur'
        }],
        position:[{
          required:true,message:'请选择仓库地点',trigger:'blur'
        }],
        edate:[{
          required:true,message:'请输入到期时间',trigger:'blur'
        }],
        size:[{
          required:true,message:'请选择仓库大小',trigger:'blur'
        }]
      }
    }
  },
  /*
    mounted(){
     this.initWare;
     this.initWareData;
    },
  * */

  methods:
    {
      initWare(){
        this.getRequest('/获取所有仓库信息',user.id).then(res=>{
          if(res)
          {
            //this.warehouse = res
          }
        })
      },
      initWareData(){
        this.getRequest('/获取所有仓库商品信息',user.id).then(res=>{
          if(res)
          {
            //this.wareData = res
          }
        })
      },
      filterTag(value, row) {
        return row.status === value;
      },
      warehouseApply(){
        this.dialogFormVisible = true;
      },
      getToday(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var today = year + '-' + (month >= 10 ? month : '0' + month) + '-' + (day >= 10 ? day : '0' + day);
        this.wareForm.sdate = today;
      },
      selectSize(event){
        if(this.wareForm.edate)
        {
          let singlePrice = 0;
          switch (event) {
            case '10000':
              singlePrice = 10000;
              break;
            case '1000':
              singlePrice = 1000;
              break;
            case '100':
              singlePrice = 100;
              break;
          }
          this.checkPrice(singlePrice,this.wareForm.sdate,this.wareForm.edate);
        }
      },
      selectEdate(event){
        var year = event.getFullYear();
        var month = event.getMonth()+1;
        var day = event.getDate();
        var edate = year + '-' + (month >= 10 ? month : '0' + month) + '-' + (day >= 10 ? day : '0' + day);
        this.wareForm.edate = edate;
        if(this.wareForm.size)
        {
          this.checkPrice(this.wareForm.size,this.wareForm.sdate,this.wareForm.edate)
        }
      },
      submit() {
        this.$refs.wareForm.validate((valid) => {
          if (valid) {
            let data = {
              userid:'',
              warehouse:'this.applyForm'
            }
            /*this.postRequest('/申请一个仓库',data).then((res)=>{
               if(res){}
            })*/
            this.warehouse.name = this.wareForm.name;
            this.warehouse.position = this.wareForm.position;
            this.warehouse.price = this.wareForm.price;
            this.warehouse.size = this.wareForm.size;
            this.warehouse.sdate=this.wareForm.sdate;
            this.warehouse.edate=this.wareForm.edate;
            this.dialogFormVisible = false;
            this.$message({
              message: '申请成功',
              type: 'success'
            })
          } else {
            return false;
          }
        });
      },
      checkPrice(price,sdate,edate){
        //获取两个日期之间月份差值
        let startMonths = sdate.split('-');
        let endMonths = edate.split('-');
        let months = Math.abs((parseInt(startMonths[0]) * 12 + parseInt(startMonths[1])) - (parseInt(endMonths[0]) * 12 + parseInt(endMonths[1])));
        if(months!=0)
        {
          this.wareForm.price = months * price;
        }else
        {
          this.wareForm.price = price;
        }
      },
      warehouseDelete(){
        this.$confirm('此操作将永久注销仓库, 是否执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发送注销仓库请求,传递用户id，仓库id
          let data = {
            userid:'user.id',
            wareid:'warehouse.id'}
          /*this.putRequest('/仓库商品上架请求',data).then(res=>{
          if(res)
          { }
        })
          * */
          this.warehouse={};
          this.$message({
            type: 'success',
            message: '注销成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销'
          });
        });
      },
      upShelf(index,row)
      {
        this.$confirm(row.name+'确认上架?', '确认上架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送上架请求,传递用户id，仓库id，商品id
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
            goodsid:'waregoods.id'}
          /*this.putRequest('/仓库商品上架请求',data).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          row.status = '已上架';
          this.$message({
            type: 'success',
            message: '上架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架'
          });
        });
      },
      downShelf(index, row)
      {
        this.$confirm(row.name+'确认下架?', '确认下架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送下架请求,传递用户id，仓库id，商品id
          let data = {
            userid:'',
            wareid:'warehouse.id',
            goodsid:'waregoods.id'
          }
          /*this.putRequest('/仓库商品下架请求',data).then(res=>{
          if(res)
          {
              row.status = '未上架';
              this.$message({
              type: 'success',
              message: '下架成功!'
          }
        })
          * */
          row.status = '未上架'
          this.$message({
            type: 'success',
            message: '下架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });
      },
      handlerSelectionChange(val){
        this.selectItems = val;
        console.log(val);
      },
      upShelfMany()
      {
        this.$confirm('确认批量上架?', '批量上架操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送批量上架请求,传递用户id，仓库id，商品批量id
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          let flag=false;
          this.selectItems.forEach(item=>{
            if(item.status=='已上架')
            {
              flag=true;
            }
          })
          if(flag)
          {
            this.$message.error("不可重复上架，请进行筛选")
          }
          else
          {
            this.selectItems.forEach(item=>{
              item.status = '已上架'
            })
            this.$message({
              type: 'success',
              message: '批量上架成功!'
            });
          }
          //每次选择后清空
          this.$refs.waregoodsTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量上架'
          });
        });
      },
      outShelfMany()
      {
        this.$confirm('确认批量下架?', '批量下架操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送批量下架请求,传递用户id，仓库id，商品批量id
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          let flag=false;
          this.selectItems.forEach(item=>{
            if(item.status=='未上架')
            {
              flag=true;
            }
          })
          if(flag)
          {
            this.$message.error("不可重复下架，请进行筛选")
          }
          else
          {
            this.selectItems.forEach(item=>{
              item.status = '未上架'
            })
            this.$message({
              type: 'success',
              message: '批量下架成功!'
            });
          }
          //每次选择后清空
          this.$refs.waregoodsTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量上架'
          });
        });
      },
      handleSizeChange(val) {
        this.pageParams.pageNum = 1;
        this.pageParams.pageSize = val;
      },

      handleCurrentChange(val) {
        this.pageParams.pageNum = val;
      }
      }

}

</script>

<style>
.warehouseHead{
  padding: 15px;
}
</style>
